<!-- 
  props 优先级比 log 高
  如果传入了props，那么就用props，否则用log
  传入的imgs一个数组对象，所有不能对log.imgs的地址进行修改

  腾讯云推荐的播放器：https://cloud.tencent.com/act/pro/cos-video?player=tcplayer&mode=mp4
  详细API文档：https://cloud.tencent.com/document/product/436/104530
	
	这里用的是uni的内置：https://zh.uniapp.dcloud.io/component/video.html
  
 -->
<script setup lang="ts">
	import { toFileUrl } from '@/utils/cos'
	import type { Log } from '@/env.d'
	import { inject, computed, ref } from 'vue'
	import useGlobalStore from '@/stores/global.ts'
	
	const videoPlay = useGlobalStore().videoPlay

	// 从父组件拿到log，主要是获取userId
	const log : Log = inject('log')!
	
	/** files是视频列表，不传就用父组件注入的log.videos */
	const props = defineProps<{ videos ?: string[] }>()
	/** 视频名称列表，计算从哪里取属性 */
	const videos = computed(() => props.videos || log.videos)

	/**
	 * 真正的视频URL列表
	 * 传入的文件要处理，如果不是http开头，那么就加上OOS地址，否则直接用，而且要改为https
	 */
	const videoUrls = computed(() => toFileUrl(videos.value, 'videos/', log.userid))

	const clickVideo = (v : string) => {
		videoPlay.show(v)
	}

</script>

<template>
	<view class="viewer-videos">
		<view class="video" v-for="v in videoUrls" :key="v" @click.capture.stop="clickVideo(v)">
			<image :src="`${v}?ci-process=snapshot&time=1&format=jpg`" mode="aspectFill" />
			<uni-icons class="btn" type="videocam" size="56" color="#fffc"></uni-icons>
		</view>
	</view>
	
</template>

<style scoped lang="scss">
	.viewer-videos {
		// border: 1px solid red;
		// white-space: nowrap;
		overflow-y: hidden;
		width: fit-content;
		max-width: 100%;

		display: flex;
		gap: var(--block-gap);

		.video {
			flex-shrink: 0;
			position: relative;
			overflow: hidden;

			border-radius: var(--block-border-radius);
			height: var(--block-height);
			width: var(--block-height);

			image {
				height: var(--block-height);
				width: var(--block-height);
			}

			.btn {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%)
			}
		}
	}

	.video-play {
		width: 100%;
	}
</style>